<template>
  <div class="op-button-list" :style="listStyle">
    <op-button
      v-for="(item, index) in buttonList"
      :key="index"
      v-bind="item"
      :style="{ ...commonStyle, ...item.style }"
      @buttonClick="buttonClick"
    />
  </div>
</template>
<script setup>
const props = defineProps({
  buttonList: {
    type: Array,
    default: () => [],
  },
  commonStyle: {
    type: [String, Object],
  },
  listStyle: {
    type: [String, Object],
  },
});

const emit = defineEmits(['buttonClick']);

function buttonClick(data) {
  emit('buttonClick', data);
}
</script>

<style lang="scss" scoped>
.op-button-list {
  display: flex;
  align-items: center;
}
</style>
